<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
            }
            #box {
                width: 100%;
                height: 100%;
                background: khaki;
            }
            #screen {
                width: 100%;
                height: 95%;
                background: tomato;
                position: relative;
            }
            section {
                position: absolute;
                left: 100%;
                font-size: 50px;
                width: 100%;
            }
            nav {
                text-align: center;
            }
            input {
                width: 70%;
                height: 30px;
                vertical-align: top;
                margin-top: 5px;
            }
            button {
                width: 60px;
                height: 30px;
                background: salmon;
                /*margin-top: 5px;*/
                vertical-align: top;
                margin-top: 5px;
                color: white;
            }
            embed {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="screen">
                <embed src="http://player.youku.com/player.php/sid/XMTY0Mzk4MDU3Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
                <section>lkjqweoirjoiwqejrokm</section>
            </div>
            <nav>
                <input type="text" name="name" value="">
                <button>提交</button>
            </nav>
        </div>
    </body>
    <script src="jquery-3.1.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        $.extend({
            suijiyanse:function(){
                var a = parseInt(Math.random()*256);
                var b = parseInt(Math.random()*256);
                var c = parseInt(Math.random()*256);
                return 'rgb('+a+','+b+','+c+')'
            },
            suijitop:function(){
                return parseInt(Math.random()*500)
            },
            suijisudu:function(){
                return parseInt(Math.random()*1000+4000)
            },
            suijizi:function(){
                return parseInt(Math.random()*30+50)
            }
        })
        var func = function(){
            var txt = $('input').val(); //获取input的value值并赋给变量txt.
            var section = $('<section></section>'); //创建一个新标签
            section.html(txt); //给先标签添加内容
            var sColor = $.suijiyanse();
            var sTop = $.suijitop();
            var sSpeed = $.suijisudu();
            var sZi = $.suijizi();
            $('#screen').append(section); //将新标签插入原来的标签内
            section.css({
                color: sColor,
                top: sTop,
                fontSize: sZi,
            })
            section.animate({
                left: '-100%' ,
            },sSpeed,function(){
                section.remove();
            });
            
        }
        $('button').on('click',function(){
            func();
            // txt.value = null;

        })
        $(document).on('keydown',function(e){
            // console.log(e.keyCode); //打印出键码
            if (e.keyCode == 13) { //回车键
                func();
            }else if (e.keyCode == 27){ //delete键
                $('input').val('');
            }
        })
    </script>
</html>
